
<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="2"
        ><div class="grid-content bg-purple">姓名：</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-input
            v-model="queryParam.ename"
            placeholder="请输入内容"
          ></el-input></div
      ></el-col>
      <el-col :span="2"><div class="grid-content bg-purple">部门:</div></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-select v-model="queryParam.deptno" placeholder="请选择活动区域">
            <el-option
              :value="dept.deptno"
              :label="dept.dname"
              v-for="dept in deptList"
              :key="dept.deptno"
            ></el-option>
          </el-select></div
      ></el-col>

      <el-col :span="2"
        ><div class="grid-content bg-purple">
          <el-button
            type="success"
            @click="searchEmp"
            round
            icon="el-icon-search"
            >搜索</el-button
          >
        </div></el-col
      >

      <el-col :span="2"
        ><div class="grid-content bg-purple">
          <el-button
            type="success"
            @click="resetQuery"
            round
            icon="el-icon-refresh-left"
            >重置</el-button
          >
        </div></el-col
      >
    </el-row>
    <el-row>
      <div style="height: 10px"></div>
    </el-row>

    <el-row>
      <el-button type="primary" @click="addEmp">添加员工</el-button>
      <el-button type="danger" @click="empDelete">批量删除</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </el-row>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="empSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="empno" label="empno" width="80"> </el-table-column>
      <el-table-column prop="ename" label="ename" width="150">
      </el-table-column>
      <el-table-column prop="sal" label="sal"> </el-table-column>
      <el-table-column prop="dname" label="dept"> </el-table-column>
      <el-table-column prop="mname" label="mgr"> </el-table-column>
      <el-table-column prop="job" label="job"> </el-table-column>
      <el-table-column prop="hiredate" label="hiredate"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="empEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="empDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next, total,sizes"
      :total="total"
      :page-size="size"
      :page-sizes="pageSizes"
      :current-page="current"
      @next-click="currentChange"
      @prev-click="currentChange"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination>

    <el-dialog
      title="员工"
      :visible.sync="empDialogVisible"
      width="60%"
      @closed="empFormClose"
      @opened="empFormOpen"
    >
      <el-form
        :model="empForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名称" prop="ename">
          <el-input v-model="empForm.ename"></el-input>
        </el-form-item>

        <el-form-item label="工资" prop="sal">
          <el-input v-model="empForm.sal"></el-input>
        </el-form-item>

        <el-form-item label="奖金" prop="comm">
          <el-input v-model="empForm.comm"></el-input>
        </el-form-item>

        <el-form-item label="领导" prop="mgr">
          <el-input v-model="empForm.mgr"></el-input>
        </el-form-item>

        <el-form-item label="职位" prop="job">
          <el-input v-model="empForm.job"></el-input>
        </el-form-item>

        <el-form-item label="部门" prop="deptno">
          <el-select v-model="empForm.deptno" placeholder="请选择活动区域">
            <el-option
              :label="dept.dname"
              :value="dept.deptno"
              v-for="dept in deptList"
              :key="dept.deptno"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="入职时间">
          <el-col :span="11">
            <el-form-item prop="hiredate">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="empForm.hiredate"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="empDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="empFormSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // Model中原本是没有数据的
      empDialogVisible: false,
      selectionEmp: [], // 定义一个数组用来接收用户勾选的数据
      total: 0, // 总条数,
      size: 10, //每页显示的条数
      current: 1, // 当前页
      pageSizes: [5, 10, 20],
      deptList: [], // 部门的数据,
      queryParam: {
        // 查询参数
        ename: "",
        deptno: "",
      },
      empForm: {
        ename: "admin",
        sal: 20000.0,
        comm: 500.0,
        mgr: 7369,
        job: "Java开发工程师",
        deptno: 10,
        hiredate: "2022-06-17",
      },
      rules: {
        ename: [
          { required: true, message: "请输入与姓名", trigger: "blur" },
          { min: 3, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },

  // 自定义的函数
  methods: {
    resetQuery() {
      this.queryParam = {};
      this.getEmpList();
    },
    searchEmp() {
      this.current = 1;
      this.getEmpList();
    },
    empFormOpen() {
      this.getDeptList();
    },
    getDeptList() {
      var app = this;
      this.http({
        url: "dept/list",
        method: "GET",
      }).then(({ data }) => {
        if (data.code == 200) {
          app.deptList = data.data;
        }
      });
    },
    sizeChange(size) {
      this.size = size;
      this.getEmpList();
    },
    currentChange(current) {
      // 1.修改当前页
      this.current = current;

      // 2.重新查询数据
      this.getEmpList();
    },
    addEmp() {
      this.empDialogVisible = true;
    },
    empFormClose() {
      // this.empForm = {};
    },
    empSelectionChange(selection) {
      let array = [];
      for (var i = 0; i < selection.length; i++) {
        array.push(selection[i].empno);
      }
      this.selectionEmp = array;
    },

    // 单个删除，批量删除(不要传参)
    empDelete(row) {
      debugger;
      if (row.empno) {
        // 能进入这里说明是单个删除,把要删除的empno放入到数组中
        // 之前之气N的
        this.selectionEmp = [];
        this.selectionEmp.push(row.empno);
      }

      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          debugger;
          this.http({
            url: "emp/remove",
            method: "POST",
            data: this.selectionEmp, // 传递是选择的数据
          }).then(({ data }) => {
            debugger;
            if (data.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getEmpList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    empEdit(row) {
      debugger;
      // 用户点击编辑是需要传递数据信息

      // 1.根据id查询用户的信息
      this.http({
        url: "emp/info/" + row.empno,
        method: "GET",
      }).then(({ data }) => {
        debugger;
        // 2.把Model的值更新为当前要编辑的数据
        this.empForm = data.data;

        // 3.显示对话框
        this.empDialogVisible = true;
      });
    },

    getEmpList() {
      var app = this;
      // 1.发送请求到后台查询数据
      this.http
        .request({
          url: "emp/page",
          method: "POST",
          data: {
            current: this.current,
            size: this.size,
            ename: this.queryParam.ename,
            deptno: this.queryParam.deptno,
          },
        })
        .then(({ data }) => {
          // 解构表单时
          // 请求成功时的回调
          console.log(data);
          // 2.把data赋值Model中的数据
          app.tableData = data.data.records;
          app.current = data.data.current;
          app.size = data.data.size;
          app.total = data.data.total;
        })
        .catch((error) => {
          // 请求失败的回调
          console.log(error);
        });
    },

    empFormSubmit() {
      // 1.获取表单数据
      console.log(this.empForm);

      var url = this.empForm.empno ? "update" : "save";

      console.log("url", url);

      // 2.发送请求携带数据
      this.http({
        url: "emp/" + url,
        method: "POST",
        data: this.empForm,
      }).then(({ data }) => {
        if (data.code == 200) {
          // 提示用户添加成功
          this.$message({
            message: "添加成功",
            type: "success",
          });
          // 关闭对话框
          this.empDialogVisible = false;

          // 刷新页面
          this.getEmpList();
        }
      });
    },
  },
  // 页面加载的时候调用，类似ready函数 $(function(){})
  mounted() {
    // 1.查询emp的数据
    this.getEmpList();

    // 2.查询dept的数据，搜索的时候需要用到
    this.getDeptList();
  },
};
</script>

<style>
</style>